<template>
  <baseCard title="云资源总览"
            :height="height"
            :contentStyle="{ paddingTop: '0rem'}">
    <div class="header"
         style="width: 18.4rem">
      <moduleTemplate :entity="item"
                      @show-dialog="showDialog"
                      v-for="item in overviewData"
                      :key="item"></moduleTemplate>
    </div>

  </baseCard>
  <VptModalAppRun ref="modalAppRun"
                  :showModal="showModal"
                  :modalStyle="modalStyle"
                  :detailData="detailModalData"
                  :isLandscape="isLandscape"
                  :itemLeftStyle="itemLeftStyle"
                  @onChange="onChange"
                  @rowClick="rowClick"
                  :titleTop="titleTop"
                  :column="columns"
                  :tableData="tableData"
                  :lineData="lineData"
                  :pieWidth="pieWidth"
                  :pieHeight="pieHeight"
                  @handleClick="handleClick"></VptModalAppRun>
</template>

<script setup>
import VptModalAppRun from "@/components/modal/vpt-modal-app-run/indexCloud.vue";
import { usePeriodicRequest } from "@/utils/usePeriodicRequest.js";
import {
  getYzyListData
} from "@/api/mockApi/application.js";
import { computed, ref, watch, nextTick, onMounted } from "vue";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import * as echarts from "echarts/core";
import { fontSize } from "@/utils/rem/rem.js";
import { Icon } from "@arco-design/web-vue";
import moduleTemplate from "./components/template/index.vue";

const IconFont = Icon.addFromIconFontCn({
  src: "https://at.alicdn.com/t/font_180975_ue66sq60vyd.js",
});

const props = defineProps({
  overviewData: { type: Array, default: () => ({}) },
  entity: { type: Object, default: () => ({}) },
  width: { type: String, default: "0.5rem" },
  height: { type: String, default: "0.5rem" },
  center: { type: Array, default: () => ["43%", "15%"] },
  radius: { type: Array, default: () => ["70%", "90%"] },
  planListStyle: {
    type: Object,
    default: () => ({
      height: "auto",
      margin: "0 0.2rem",
      marginTop: "0.08rem !important",
      width: "calc( 100% - 0.4rem )",
      paddingRight: "0.1rem",
    }),
  },
  modalStyle: {
    type: Object,
    default: () => ({
      width: "12rem",
      height: "4.9rem",
      padding: "0.24rem",
    }),
  },
  height: { type: String, default: "" },
  overviewData: { type: Array, default: [] },
  availabilityStyle: {
    type: Object,
    default: () => ({
      width: "auto",
      marginTop: "0.16rem",
      padding: "0.12rem",
      fontSize: "0.14rem",
    }),
  },
  titleProps: { type: Object, default: () => ({ left: "60%", top: "-15%" }) },
});
// const baseEchartRef = ref(null);

const listData = ref([
  {
    name: "CPU",
    label: "总核数",
    label2: "总核数",
    icon: "iconfont-shouye",
  },
]);

const titleTop = ref("15%");

const baseData1 = ref({
  name: "总使用率",
  centerFontColor: "#00B675",
  percentageValue: "1.63",
  percentageDrag: 98.37,
  percentageColor: ["#00B675", "#1e3651"],
});

const baseData2 = ref({
  name: "总使用率",
  centerFontColor: "#00B675",
  percentageValue: "20.48",
  percentageDrag: 79.52,
  percentageColor: ["#00B675", "#1e3651"],
});

const baseData = ref({
  name: "总使用率",
  centerFontColor: "#00B675",
  percentageValue: "13.96",
  percentageDrag: 86.04,
  percentageColor: ["#00B675", "#1e3651"],
});

const echartStyle = computed(() => {
  const { width, height } = props;
  const reg = /%$/;
  return {
    width: reg.test(width) ? width : `${width}`,
    height: reg.test(height) ? height : `${height}`,
  };
});
const itemLeftStyle = ref({ "--bef-height": "0.14rem" });
// const echartStyle = computed(() => {
//   // const { width, height } = props;
//   const reg = /%$/;
//   return {
//     width: '2rem',
//     height: '2rem',
//   };
// });

let columns = ref([
  {
    title: "应用名称",
    slotName: "app_name",
    align: "left",
    width: 180,
  },

  {
    title: "主机数",
    slotName: "app_num",
    align: "center",
    width: 70,
  },
  {
    title: "CPU(核)",
    slotName: "vcpu_total",
    align: "center",
    width: 70,
  },
  {
    title: "CPU使用率",
    slotName: "cpu_usage",
    align: "center",
    width: 70,
  },
  {
    title: "内存(GB)",
    slotName: "memory_available",
    align: "center",
    width: 100,
  },
  {
    title: "内存使用率",
    slotName: "memory_usage",
    align: "center",
    width: 155,
  },
  {
    title: "存储(GB)",
    slotName: "disk_total",
    align: "center",
    width: 80,
  },
  {
    title: "存储使用率",
    slotName: "disk_used_percent",
    align: "center",
    width: 80,
  },
]);
const chartOption = ref({});

let baseChart = null;
watch(
  () => props.entity,
  () => {
    nextTick(() => {
      getOption();
      initChart();
    });
  },
  { deep: true }
);
const option = ref([
  { props: "app_sum", name: "应用总数", value: "12" },
  {
    props: "app_num_warning",
    name: "告警应用数",
    valueClass: "is-danger",
    value: "12",
  },
  {
    props: "app_num_info",
    name: "提示应用数",
    valueClass: "is-warn",
    value: "12",
  },
  {
    props: "app_num_normal",
    name: "正常运行应用数",
    valueClass: "is-success",
    value: "12",
  },
]);

const detailModalData = ref({});
const newData = ref({});
const tableData = ref([]);

const lineData = ref([]);
const showModal = ref(false);
const onChange = (value) => {
  showModal.value = false;
  detailRequest.stopFetching();
};

const getMonitoringDetail = (params) => {
  showModal.value = true;
};
// 获取列表点击行数据
const rowClick = (item) => {
  getCharData({
    type: item.typetag,
    ip: item.app_ip,
  }).then((resp) => {
    lineData.value = resp.data || [];
  });
};
// // 弹窗字段请求
// const clounListRequest = usePeriodicRequest(getcloun, 3000000, {
// });
// // 获取弹窗列表字段
// const getcloun = (params) => {

// };
const handleClick = (item) => {
  detailModalData.value.prompt_content.forEach((element) => {
    if (element.id === item.id) {
      element.hidden = !element.hidden;
    }
  });
};
const clusterName = ref();
const appType = ref();
const detailRequest = usePeriodicRequest(getMonitoringDetail, 300000, {
  cluster_name: clusterName.value,
  app_type: appType.value,
});
const goDetail = (data) => {
  newData.value = data;
  clusterName.value = data.cluster_name;
  appType.value = data.app_type;

  detailRequest.updateParams({
    app_name: clusterName.value,
    type_code: appType.value,
  });
  detailRequest.startFetching();
};
const emit = defineEmits(["changeTab", "onChange", "handlePath"]);
const parm = ref('');
const showDialog = (item, val) => {
  if (val == '低频') {
    parm.value = item.di_type;
  } else if (val == '高频') {
    parm.value = item.ga_type;
  }
  getAppList()
}
const getAppList = (
  params = {
    type: parm.value,
  }
) => {
  getYzyListData(params).then((res) => {
    tableData.value = res.data || [];
    showModal.value = true;
  });
};
const info = ref([]);
watch(
  () => props.itemData,
  () => {
    // info.value = JSON.parse(props.itemData.info || [])
    // console.log("info.value",info.value)
  },
  { deep: true }
);
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
}
.imgclass {
  // margin-top: 0.1rem;
  // margin-left: 0.1rem;
  width: 0.15rem;
  height: 0.15rem;
  margin-left: 0.05rem;
}
.mars {
  margin-top: 0.1rem;
}
.vpt-chart {
  margin-top: 0.08rem;
}
.details-vpt {
  margin-top: -0.2rem;
}
.template {
  display: flex;

  .template-item {
    display: flex;
    width: 5.6rem;
    height: 1.4rem;
    padding: 0.2rem;
    margin-right: 0.16rem;
    color: #fff;
    font-size: 0.16rem;
    background: #1470cc1a;
    border: 0.01rem solid #0a3268;
    .value {
      margin-top: 0.1rem;
    }
  }
  .colortop {
    display: flex;
    width: 0.3rem;
    height: 0.4rem;
    margin-top: -0.08rem;
    font-size: 0.14rem;
  }
  .template-item-n1 {
    margin-left: -0.22rem;
    margin-top: 0.22rem;
    width: 3.2rem;
    height: 0.58rem;
    padding: 0.2rem;
    // margin-right: 0.16rem;
    color: #fff;
    font-size: 0.18rem;
    background: #2a83dd1a;
    border: 0.01rem solid #0a3268;
    .value {
      margin-top: 0.2rem;
    }
  }
  .template-item-n2 {
    margin-top: 0.22rem;
    margin-left: 0.2rem;
    // background-image: url('../pages/cloudResources/icon/jb1.png');
    background: linear-gradient(
      to bottom,
      rgba(235, 192, 83, 0.2) 0%,

      /* 在50%的位置变为60%不透明（即40%透明）的黄色 */ transparent 100%
        /* 在底部变为完全透明 */
    );
    // background-image: url('../icon/jb1.png');
    // background-size: cover;
    // background-position: center;
    // background: linear-gradient(180deg, #ffc30066 1%,transparent #ffc30000 100%);
    width: 1.13rem;
    height: 0.58rem;
    padding: 0.2rem;
    margin-right: 0.14rem;
    color: #fff;
    font-size: 0.14rem;
    border: 0.01rem solid #ebc05333;
    .value {
      margin-top: 0.5rem;
    }
    .details-item {
      margin-top: 0.1rem;
    }
  }
  .template-item-n5 {
    margin-top: 0.22rem;
    margin-left: 0.2rem;
    width: 1.13rem;
    height: 0.58rem;
    padding: 0.2rem;
    margin-right: 0.14rem;
    color: #fff;
    font-size: 0.14rem;
    background: #2a83dd1a;
    border: 0.01rem solid #0a3268;
    .value {
      margin-top: 0.1rem;
    }
    .details-item {
      margin-top: 0.1rem;
    }
  }
  .template-item-n4 {
    margin-top: 0.22rem;
    margin-left: 0.08rem;

    width: 1.13rem;
    height: 0.58rem;
    padding: 0.2rem;
    margin-right: 0.14rem;
    color: #fff;
    font-size: 0.14rem;
    background: #2a83dd1a;
    border: 0.01rem solid #0a3268;
    .value {
      margin-top: 0.1rem;
    }
    .details-item {
      margin-top: 0.1rem;
    }
  }
  .template-item-n3 {
    margin-top: 0.22rem;
    margin-left: 0.08rem;
    background: linear-gradient(
      to bottom,
      rgba(236, 65, 65, 0.2) 0%,
      /* 在50%的位置变为60%不透明（即40%透明）的黄色 */ transparent 100%
        /* 在底部变为完全透明 */
    );
    width: 1.13rem;
    height: 0.58rem;
    padding: 0.2rem;
    margin-right: 0.14rem;
    color: #fff;
    font-size: 0.14rem;
    border: 0.01rem solid #ec414133;
    .value {
      margin-top: 0.1rem;
    }
    .details-item {
      margin-top: 0.1rem;
    }
  }
  .template-item:last-child {
    margin-right: 0;
  }
}
.over-template-item-right {
  flex: 1;
  display: flex;
  // justify-content: space-around;
  // flex-direction:row-reverse;
  // justify-content: end;
  .details-item {
    margin-top: 0.1rem;
    width: 0.8rem;
    // max-width: 1.5rem;
    display: flex;
    flex-direction: column;
    padding-right: 0 0.08rem;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .label {
      color: #ffffffb3;
      font-size: 0.14rem;
    }
    .value {
      margin-top: 0.1rem;
      color: #ffffff;
      font-size: 0.14rem;
    }
  }
  .details-item:last-child {
    padding-right: 0;
  }
}
</style>
